<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import NoteDrawer from './noteDrawer.vue';
import DevDialog from '@/components/Attention/devDialog.vue'

import { formatDateTime } from '@/utils/formatDate.js'

import { getNoteDetailService } from '@/api/note'
import { cancelAttentionService } from '@/api/attention'

import bus from '@/utils/bus';

const map = new Map([
    ['待收尾款', 1],
    ["完成", 1]
])

const router = useRouter()

const props = defineProps({
    nodeData: {
        type: Object,
        default: () => { }
    },
    showLocation: {
        type: Boolean,
        default: false
    }
})

const drawer = ref(null)

const handleOpen = async () => {
    const { data } = await getNoteDetailService(props.nodeData.noteId)
    drawer.value.open({
        title: '查看贴子',
        data: data
    })
}

const handleLocation = () => {
    router.push({
        path: `/location/id=${props.nodeData.petId}`
    })
}

const dialog = ref()

const handleFinish = async () => {
    dialog.value.open(props.nodeData.noteId)
}

const handleCancel = async () => {
    await cancelAttentionService(props.nodeData.noteId)
    bus.emit('attention')
    ElMessage({
        message: '取消关注成功',
        type: 'success'
    })
}


</script>
<template>
    <DevDialog ref="dialog"></DevDialog>
    <note-drawer ref="drawer"></note-drawer>
    <div class="noteCard" :class="{ 'owner': nodeData.owner, 'finish': map.get(nodeData.status) == 1 }">
        <div class="top">
            <div class="left">
                <img class="avatar" :src="nodeData.userImg" alt="">
                <span class="user_name">{{ nodeData.userName }}</span>
            </div>
            <div class="right">
                <a @click="handleOpen">查看详情</a>
            </div>
        </div>
        <div class="middle">
            <p class="title">{{ nodeData.title }}</p>
            <p class="price">{{ nodeData.reward }}</p>
            <!-- <div class="content">
                {{ nodeData.summary }}
            </div> -->
            <div class="content" v-html="nodeData.summary"></div>
            <div class="imgs">
                <!-- <img v-for="(item, index) in nodeData.resourcePath" :key="index" :src="item" class="img"> -->
                <el-image class="img" v-for="(item, index) in nodeData.resourcePath" :key="index" :src="item"
                    fit="cover">
                    <template #error>
                        <img class="img" src="@/assets/image/bg3.jpg" alt="">
                    </template>
                </el-image>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <div class="time">
                    发布时间:
                    {{ formatDateTime(nodeData.timestamp) }}
                </div>
                <div class="attention">
                    <el-tag v-if="!nodeData.owne && !showLocation" :type="nodeData.follow ? 'success' : 'danger'">{{
                        nodeData.follow ?
                            '已' :
                            '未'
                    }}关注</el-tag>
                </div>
            </div>
            <div v-if="showLocation" class="right">
                <el-button :disabled="map.get(nodeData.status) == 1" type="warning" size="small"
                    @click="handleLocation">查看位置</el-button>
                <el-button :disabled="map.get(nodeData.status) == 1" type="success" size="small"
                    @click="handleFinish">完成任务</el-button>
                <el-button :disabled="map.get(nodeData.status) == 1" type="danger" size="small"
                    @click="handleCancel">取消关注</el-button>
            </div>
        </div>
    </div>
</template>
<style scoped lang='scss'>
.owner {
    background-color: rgb(186, 219, 234) !important;
}

.finish {
    background-color: #eee !important;
}

.noteCard {
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    margin-bottom: 10px;
    padding: 10px;

    .top {
        width: 100%;
        padding: 10px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            .avatar {
                width: 2.5rem;
                height: 2.5rem;
                object-fit: cover;
                border-radius: 50%;
            }

            .user_name {
                font-size: 1.2rem;
                font-weight: 600;
                margin-left: 10px;
            }
        }

        .right {
            a {
                color: #777;
                font-size: 16px;
                font-weight: 600;
                margin-right: 10px;
                cursor: pointer;

                &:hover {
                    color: skyblue
                }
            }
        }
    }

    .middle {
        width: 100%;
        height: 100%;
        margin-top: 1rem;

        .title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .price {
            color: #f00;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .content {
            // 溢出显示省略号
            width: 60%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 10px;
        }

        .imgs {
            .img {
                width: 120px;
                height: 120px;
                object-fit: cover;
                margin-right: 1rem;
                border-radius: 10px;
            }
        }
    }

    .bottom {
        width: 100%;
        height: 100%;
        margin-top: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: end;

        .time {
            color: #777;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .right {
            margin-right: 1rem;
        }
    }
}
</style>